<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>学习事项</title>
   <link rel="stylesheet" href="//at.alicdn.com/t/c/font_4536705_hgsu4do1xdd.css">
   <link rel="shortcut icon" href="/兰/images/logo.png">
    <style>
        html,
        body {
            height: 100%;
            width: 100%;
            text-align: center;
            background-color: #cfebf7da;
            margin: 0px;
        }

        .box {
            left: 34%;
            position: absolute;
            width: 500px;
            height: 500px;
            background-color:rgb(236, 242, 244);
            border-radius: 10px;
        }

        .box1 {
            display: flex;

        }

        
        /* 输入框 */
        /* 添加按钮 */
        .box1>span {
            position: absolute;
            right: 0;
            height: 50px;
            width: 50px;
        padding: 0px;
        
        }
        #add-todo {
            cursor: pointer;
            background-color: white;
            color:rgb(136, 199, 222);
            margin-top: 10px;
            margin-right: 10px;
            text-align: center;
            border-radius: 50%;
            font-size: 50px;
        }
        #add-todo:hover{
            color:rgb(0, 0, 0);
        }
        #new-todo {
            width: 480px;
            height: 50px;
        }

        .box1>input {
            border-radius: 10px;
            outline: rgb(192, 59, 49);
            background-color: white;
            border: 10px rgb(136, 199, 222) solid;
            caret-color:black;
        }

        #todolist {
            list-style: none;
            margin: 0px;
            padding: 0px;
        }

        ul {
            text-align: center;
        }

        ul>li {
            text-align:left;
            width: 490px;
            height: 50px;
            background-color: rgb(255, 255, 255);
            box-shadow: 0 0 4px rgb(0, 0, 0);
            cursor: pointer;
            margin-left: 5px;
            border-radius: 10px;
            margin-top: 5px;
        }

        /* 生成后的按钮 */
        ul>li>button {
            margin-top: 10px;
            border: 5px;
            cursor: pointer;
        }

        ul>li>button:nth-child(1) {
            width: 30px;
            height: 30px;
            position: absolute;
            font-size: 10px;
            right: 10px;
        }

        ul>li>button:nth-child(1):hover {
            background-color: rgba(49, 217, 235, 0.904);
        }

        ul>li>button:nth-child(2) {
            width: 30px;
            height: 30px;
            position: absolute;
            right: 50px;
            font-size: 10px;
        }

        ul>li>button:nth-child(2):hover {
            background-color: rgba(8, 144, 28, 0.608);
        }

        ul>li>button:nth-child(3) {
            width: 30px;
            height: 30px;
            position: absolute;
            right: 90px;
            font-size: 10px;
        }

        ul>li>button:nth-child(3):hover {
            background-color: rgba(255, 0, 0, 0.647);
        }
        /* 编辑后的input */
        ul>li>input{
            border: none;
            margin-top: 5px;
            margin-left: 5px;
            outline: none;
            font-size: 25px;
        }
    </style>
</head>

<body>
    <div>
        <!-- 头部标题 -->
        <div style="padding-top: 20px;">
            <h2 style="font-size: 40px;font-family: Cooper Black;">To Do List</h2>
        </div>
        <div class="box">
            <!-- 添加待办事项一栏 -->
            <div class="box1">
                <!-- input 边框为圆角 -->
                <input id="new-todo" type="text" placeholder="添加一条待办的学习事项...">
                <!-- 按钮为圆形 -->
                <span id="add-todo" class="iconfont icon-tianjia"></span>
            </div>
            <!-- 主体部分 -->
            <!-- 存放内容的容器 -->
            <ul id="todolist"></ul>
        </div>
    </div>
    <script src="../哲/待办列表.js"></script>

    <!-- 说明：
    1.整体颜色为蓝色
    2.什么事项都没有添加时，主体部分显示“你现在没有待办的学习事项噢！”
    3.完成的事项打勾后排列在最后面，并且该条事项边框背景变成浅蓝色
    4.未完成的事项边框背景是默认的背景色
    5.待办事项的功能要有增、删、改、完成打勾 四个功能
    6.尽量实现关闭这个页面后学习事项不会恢复默认状态  -->

</body>

</html>